<visualize-app class="app-container vis-editor vis-type-{{ vis.type.name }}">
  <!-- Local nav. -->
  <kbn-top-nav name="visualize" config="topNavMenu">
    <!-- Transcluded elements. -->
    <div data-transclude-slots>
      <!-- Breadcrumbs. -->
      <bread-crumbs
        data-transclude-slot="topLeftCorner"
        page-title="getVisualizationTitle()"
        use-links="true"
        omit-current-page="true"
        omit-pages="['edit']"
      ></bread-crumbs>

      <!-- Search. -->
      <div
        data-transclude-slot="bottomRow"
        ng-show="chrome.getVisible()"
        class="fullWidth"
      >
        <!-- Block searching if the Visualization is linked to a Saved Search. -->
        <div ng-if="vis.type.requiresSearch && $state.linked">
          Linked to Saved Search &ldquo;{{ savedVis.savedSearch.title }}&rdquo;
          &nbsp;
          <a
            href=""
            ng-dblclick="unlink()"
            tooltip="Double click to unlink from Saved Search"
          >
            <span aria-hidden="true" class="fa fa-chain-broken"></span>
          </a>
        </div>

        <!-- Allow searching if there is no linked Saved Search. -->
        <form
          ng-if="vis.type.requiresSearch && !$state.linked"
          name="queryInput"
          ng-submit="fetch()"
          class="fullWidth"
        >
          <div class="typeahead" kbn-typeahead="visualize">
            <div class="kuiLocalSearch">
              <input
                ng-model="state.query"
                parse-query
                input-focus
                kbn-typeahead-input
                placeholder="Search..."
                type="text"
                class="kuiLocalSearchInput"
                ng-class="{'kuiLocalSearchInput-isInvalid': queryInput.$invalid}"
              >
              <button
                type="submit"
                aria-label="Search"
                class="kuiLocalSearchButton"
                ng-disabled="queryInput.$invalid"
              >
                <span aria-hidden="true" class="fa fa-search"></span>
              </button>
            </div>
            <kbn-typeahead-items></kbn-typeahead-items>
          </div>
        </form>
      </div>
    </div>
  </kbn-top-nav>

  <!-- Filters. -->
  <filter-bar state="state"></filter-bar>

  <div class="vis-editor-content">

    <vis-editor-vis-options
      ng-if="vis.type.fullEditor"
      vis="vis"
      saved-vis="savedVis"
      editor="vis.type.params.editor"
      ui-state="uiState"
      stage-editable-vis="stageEditableVis"
      class="vis-editor-full-options"
    ></vis-editor-vis-options>

    <div class="collapsible-sidebar" ng-if="!vis.type.fullEditor && chrome.getVisible()" >
      <vis-editor-sidebar vis="editableVis" class="vis-editor-sidebar"></vis-editor-sidebar>
    </div>

    <div class="vis-editor-canvas" ng-if="!vis.type.fullEditor" ng-class="{ embedded: !chrome.getVisible() }">
      <visualize
        vis="vis"
        data-shared-item
        data-title="{{savedVis.lastSavedTitle}}"
        data-description="{{savedVis.description}}"
        render-counter
        ui-state="uiState"
        show-spy-panel="chrome.getVisible()"
        editable-vis="editableVis"
        search-source="savedVis.searchSource">
      </visualize>
    </div>

  </div>
</visualize-app>
